
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>doc/api/endpoint-api.js - jsplumb API documentation</title>

    

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jsplumb-doc.css">

    <!-- yuidoc -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">

    <link rel="stylesheet" href="../../css/external/cssgrids-min.css">
    <link rel="stylesheet" href="../../css/external/prettify-min.css">

    <link rel="shortcut icon" type="image/png" href="../../img/favicon.png">
    <script src="https://yui-s.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
    <style>
        #doc {
            text-align:left;
            margin-top:44px;
        }
    </style>
</head>
<body class="yui3-skin-sam">

    <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../../">DEMOS</a></li>
                <li><a href="../../doc/home.html">DOCS</a></li>
                <li><a href="../../apidocs/index.html">API</a></li>
                <li><a href="../../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

    <div class="container">
        <div class="row">
            <div id="doc">
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Anchors.Assign.html">Anchors.Assign</a></li>
            
                <li><a href="../classes/Anchors.AutoDefault.html">Anchors.AutoDefault</a></li>
            
                <li><a href="../classes/Anchors.Bottom.html">Anchors.Bottom</a></li>
            
                <li><a href="../classes/Anchors.BottomCenter.html">Anchors.BottomCenter</a></li>
            
                <li><a href="../classes/Anchors.BottomLeft.html">Anchors.BottomLeft</a></li>
            
                <li><a href="../classes/Anchors.BottomRight.html">Anchors.BottomRight</a></li>
            
                <li><a href="../classes/Anchors.Center.html">Anchors.Center</a></li>
            
                <li><a href="../classes/Anchors.Continuous.html">Anchors.Continuous</a></li>
            
                <li><a href="../classes/Anchors.ContinuousBottom.html">Anchors.ContinuousBottom</a></li>
            
                <li><a href="../classes/Anchors.ContinuousLeft.html">Anchors.ContinuousLeft</a></li>
            
                <li><a href="../classes/Anchors.ContinuousRight.html">Anchors.ContinuousRight</a></li>
            
                <li><a href="../classes/Anchors.ContinuousTop.html">Anchors.ContinuousTop</a></li>
            
                <li><a href="../classes/Anchors.Left.html">Anchors.Left</a></li>
            
                <li><a href="../classes/Anchors.LeftMiddle.html">Anchors.LeftMiddle</a></li>
            
                <li><a href="../classes/Anchors.Perimeter.html">Anchors.Perimeter</a></li>
            
                <li><a href="../classes/Anchors.Right.html">Anchors.Right</a></li>
            
                <li><a href="../classes/Anchors.RightMiddle.html">Anchors.RightMiddle</a></li>
            
                <li><a href="../classes/Anchors.Top.html">Anchors.Top</a></li>
            
                <li><a href="../classes/Anchors.TopCenter.html">Anchors.TopCenter</a></li>
            
                <li><a href="../classes/Anchors.TopLeft.html">Anchors.TopLeft</a></li>
            
                <li><a href="../classes/Anchors.TopRight.html">Anchors.TopRight</a></li>
            
                <li><a href="../classes/Connection.html">Connection</a></li>
            
                <li><a href="../classes/Connector.html">Connector</a></li>
            
                <li><a href="../classes/Connectors.Bezier.html">Connectors.Bezier</a></li>
            
                <li><a href="../classes/Connectors.Flowchart.html">Connectors.Flowchart</a></li>
            
                <li><a href="../classes/Connectors.StateMachine.html">Connectors.StateMachine</a></li>
            
                <li><a href="../classes/Connectors.Straight.html">Connectors.Straight</a></li>
            
                <li><a href="../classes/Endpoint.html">Endpoint</a></li>
            
                <li><a href="../classes/Endpoints.Blank.html">Endpoints.Blank</a></li>
            
                <li><a href="../classes/Endpoints.Dot.html">Endpoints.Dot</a></li>
            
                <li><a href="../classes/Endpoints.Image.html">Endpoints.Image</a></li>
            
                <li><a href="../classes/Endpoints.Rectangle.html">Endpoints.Rectangle</a></li>
            
                <li><a href="../classes/jsPlumb.html">jsPlumb</a></li>
            
                <li><a href="../classes/jsPlumbInstance.html">jsPlumbInstance</a></li>
            
                <li><a href="../classes/jsPlumbUIComponent.html">jsPlumbUIComponent</a></li>
            
                <li><a href="../classes/jsPlumbUtil.html">jsPlumbUtil</a></li>
            
                <li><a href="../classes/jsPlumbUtil.EventGenerator.html">jsPlumbUtil.EventGenerator</a></li>
            
                <li><a href="../classes/Overlay.html">Overlay</a></li>
            
                <li><a href="../classes/OverlayCapableJsPlumbUIComponent.html">OverlayCapableJsPlumbUIComponent</a></li>
            
                <li><a href="../classes/Overlays.Arrow.html">Overlays.Arrow</a></li>
            
                <li><a href="../classes/Overlays.Diamond.html">Overlays.Diamond</a></li>
            
                <li><a href="../classes/Overlays.Label.html">Overlays.Label</a></li>
            
                <li><a href="../classes/Overlays.PlainArrow.html">Overlays.PlainArrow</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: doc/api/endpoint-api.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
* Models an Endpoint - one end of a Connection. An Endpoint has an underlying Anchor, which is what determines the
* Endpoint&#x27;s position. Each Endpoint can have 1 to &#x60;maxConnections&#x60; connections emanating from it (set &#x60;maxConnections&#x60; to -1 
* to allow unlimited Connections; the default is 1).
*
* You never need to create an Endpoint directly. When you provide an Endpoint definition to an appropriate 
* jsPlumb method, you can do so either as a string, or as an array of the form &#x60;[String, Object]&#x60;.  In the former case, the string
* must be the name of some available Endpoint, such as &#x60;&quot;Dot&quot;&#x60; or &#x60;&quot;Rectangle&quot;&#x60;. In the latter case,
* the first argument to the array is the Endpoint name, and the second is a JS object containing 
* constructor parameters for the Endpoint, for instance
* 
*    &#x60;[ &quot;Dot&quot;, { radius:75 } ]&#x60;
*
 * @class Endpoint 
 * @extends OverlayCapableJsPlumbUIComponent
 * @constructor 
 * @param {Object} params Constructor parameters.
 * @param {String|Array} [params.anchor] Definition of the Anchor for the endpoint.  See the jsPlumb documentation for a discussion of this.
 * @param {String|Array} [params.endpoint] Endpoint definition. See the jsPlumb documentation for a discussion of this.
 * @param {Boolean} [params.enabled=true] Whether or not the Endpoint should be enabled for mouse events (drag/drop).
 * @param {Object} [params.paintStyle=null] Endpoint style, a js object. may be null. 
 * @param {Object} [params.hoverPaintStyle=null] Style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null.
 * @param {String} [params.cssClass=null] CSS class to set on the display element associated with this Endpoint.
 * @param {String} [params.hoverClass=null] CSS class to set on the display element associated with this Endpoint when it is in hover state.
 * @param {String|Selector|Element} params.source Element the Endpoint is attached to, of type String (an element id), element selector, or element. Required. 
 * @param {String|Selector|Element} [params.container] Id or selector instructing jsPlumb where to attach the element it creates for this endpoint.  you should read the documentation for a full discussion of this.
 * @param {Connection[]} [params.connections] List of Connections to configure the Endpoint with. 
 * @param {Boolean} [params.isSource=false] Indicates the endpoint can act as a source of new connections. Optional; defaults to false.
 * @param {Integer} [params.maxConnections=1] A value of -1 means no upper limit. 
 * @param {Object} [params.dragOptions] If &#x60;isSource&#x60; is set to true, you can supply arguments for the underlying library&#x27;s drag method. Optional; defaults to null. 
 * @param {Object} [params.connectorStyle] If &#x60;isSource&#x60; is set to true, this is the paint style for Connections from this Endpoint. Optional; defaults to null.
 * @param {Object} [params.connectorHoverStyle] If &#x60;isSource&#x60; is set to true, this is the hover paint style for Connections from this Endpoint. Optional; defaults to null.
 * @param {String|Object} [params.connector] Connector type to use.  Like &#x60;endpoint&#x60;, this may be either a single string nominating a known Connector type (eg. &#x60;&quot;Bezier&quot;&#x60;, &#x60;&quot;Straight&quot;&#x60;), or an array containing [name, params], eg. &#x60;[ &quot;Bezier&quot;, { curviness:160 } ]&#x60;.
 * @param {Object[]} [params.connectorOverlays] Array of Overlay definitions that will be applied to any Connection from this Endpoint. 
 * @param {String} [params.connectorClass] CSS class to set on Connections emanating from this Endpoint.
 * @param {String} [params.connectorHoverClass] CSS class to set on to set on Connections emanating from this Endpoint when they are in hover state.		 
 * @param {Boolean} [params.connectionsDetachable=true] Sets whether connections to/from this Endpoint should be detachable or not.
 * @param {Boolean} [params.isTarget=false] Indicates the endpoint can act as a target of new connections. Optional; defaults to false.
 * @param {Object} [params.dropOptions] If &#x60;isTarget&#x60; is set to true, you can supply arguments for the underlying library&#x27;s drop method with this parameter. Optional; defaults to null. 
 * @param {Boolean} [params.reattach=false] Determines whether or not the Connections reattach after they have been dragged off an Endpoint and left floating. defaults to false: Connections dropped in this way will just be deleted.
 * @param {Object} [params.parameters={}] JS object containing parameters to set on the Endpoint. These parameters are then available via the getParameter method.  When a connection is made involving this Endpoint, the parameters from this Endpoint are copied into that Connection. Source Endpoint parameters override target Endpoint parameters if they both have a parameter with the same name.
 * @param {String} [params.connector-pointer-events] A value for the &#x27;pointer-events&#x27; property of any SVG elements that are created to render connections from this endoint.
 * @param {String} [params.connectionType] Optional descriptor for the &#x60;type&#x60; of connections this endpoint is a source for. Used when dragging new connections.
 * @param {String|Array} [params.dragProxy] Optional endpoint definition for the endpoint to use as the drag endpoint when dragging a new connection. If you provide this it will override any other means of determining what the drag endpoint should look like.
 */

 /**
 * The Endpoint&#x27;s drawing area
 * @property canvas
 * @type {Element}
 */

/**
 * Optional spec for the endpoint to use when dragging a new connection
 * @property dragProxy
 * @type {String|Array}
 */

 /**
 * List of Connections for the Endpoint.
 * @property connections
 * @type {Array}
 */

 /**
 * Scope descriptor for the Endpoint.
 * @property scope
 * @type {Array|String}
 */

 /**
 * Sets the anchor to use for this Endpoint.  &#x60;anchorParams&#x60; is an object in the same
 * form that you would pass as the &#x60;anchor&#x60; parameter to &#x60;jsPlumb.addEndpoint&#x60; or &#x60;jsPlumb.connect&#x60;.
 * @method setAnchor
 * @param {Object} anchorParams Parameters for the anchor
 * @param {Boolean} [doNotRepaint = false] Instructs jsPlumb to not repaint after setting the new anchor.
 * @return {Endpoint} The Endpoint.
 */

 /**
 * Sets the underlying visual representation to use for this Endpoint.  &#x60;ep&#x60; is an object in the same
 * form that you would pass as the &#x60;endpoint&#x60; parameter to &#x60;jsPlumb.addEndpoint&#x60; or &#x60;jsPlumb.makeSource&#x60;.
 * @method setEndpoint
 * @param {Object} ep Parameters for the endpoint
 */

 /**
 * Detach from the given Connection, without cleaning up or destroying the Connection.
 * @method detachFromConnection
 * @param {Connection} connection
 */

 /**
 * Detach and cleanup a connection. 
 * @method detach
 * @param {Connection} connection
 */

 /**
 * Detach all connections for this endpoint.
 * @method detachAll
 * @param {Boolean} [fireEvent=true] Whether or not to fire an event for each detach.
 * @param {Boolean} [forceDetach=false] If true, this call will ignore any &#x60;beforeDetach&#x60; interceptors.
 */

 /**
 * Detach all Connections from this Endpoint to/from the given target endpoint.
 * @method detachFrom
 * @param {Endpoint} targetEndpoint Endpoint between which and this Endpoint to detach all Connections.
 * @param {Boolean} [fireEvent=true] Whether or not to fire an event.
 */

/**
* Gets the Element to which this Endpoint belongs.
* @method getElement
* @return {Element} The DOM element this Endpoint is attached to.
*/

/**
* Gets the Endpoint&#x27;s UUID.
* @method getUuid
* @return {String} The UUID for this Endpoint, if there is one. Otherwise returns null.
*/

/**
* @method isEnabled
* @return {Boolean} True if the Endpoint is enabled for drag/drop connections enabled, false otherwise.
*/

/**
* @method isFull
* @return {Boolean} True if the Endpoint cannot accept any more Connections, false otherwise.
*/

/**
* @method isVisible
* @return {Boolean} Whether or not the Endpoint is currently visible.
*/

/**
 * @method isConnectedTo
 * @param {Endpoint} endpoint
 * @return {Boolean} Whether or not this Endpoint is connected to the given Endpoint.
 */

/**
* Sets whether or not connections can be dragged from this Endpoint once it is full. You would use this in a UI in 
*   which you&#x27;re going to provide some other way of breaking connections, if you need to break them at all. This property 
*   is by default true; use it in conjunction with the &#x60;reattach&#x60; option on a connect call.
* @method setDragAllowedWhenFull
* @param {Boolean} allowed Whether drag is allowed or not when the Endpoint is full.
*/   

/**
* Sets the DOM element this Endpoint is attached to.
 * @method setElement
 * @param {String|Selector|Element} el	Element id, DOM element or selector identifying the new element
 * @param {String|Selector|Element} [container] Specifies the actual parent element to use as the parent for this Endpoint&#x27;s visual representation. See the jsPlumb documentation for a discussion about this.
 * @return {Endpoint} The Endpoint.
 */ 

/**
* Sets whether or not the Endpoint is enabled for drag/drop connections.
* @method setEnabled
* @param {Boolean} enabled Whether or not the Endpoint is enabled.
*/

/**
* Sets whether or not the Endpoint is currently visible.
* @method setVisible
* @param {Boolean} visible Whether or not the Endpoint should be visible.
* @param {Boolean} [doNotChangeConnections=false] Instructs jsPlumb to not pass the visible state on to any attached Connections.
* @param {Boolean} [doNotNotifyOtherEndpoint=false] Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections.
*/


/**
* Does not draw anything visible to the user. This Endpoint is probably not what you want if you need your users to be able to drag existing Connections - for that, use a Rectangle or Dot Endpoint and assign to it a CSS class that causes it to be transparent.
* @class Endpoints.Blank
* @extends Endpoint
*/

/**
* A circular Endpoint with configurable radius.
* @class Endpoints.Dot
* @extends Endpoint
* @constructor
* @param {Object} params Constructor parameters
* @param {Integer} [params.radius=10] Radius of the Endpoint
* @param {String} [params.cssClass] Optional space-delimited list of CSS classes to attach to the Endpoint.
* @param {String} [params.hoverClass] Optional space-delimited list of CSS classes to attach to the Endpoint when the mouse is hovering over it.
*/

/**
* A rectangular Endpoint with configurable width/height.
* @class Endpoints.Rectangle
* @extends Endpoint
* @constructor
* @param {Object} params Constructor parameters
* @param {Integer} [params.width=20] Width of the Endpoint
* @param {Integer} [params.height=20] Height of the Endpoint
* @param {String} [params.cssClass] Optional space-delimited list of CSS classes to attach to the Endpoint.
* @param {String} [params.hoverClass] Optional space-delimited list of CSS classes to attach to the Endpoint when the mouse is hovering over it.
*/

/**
* An Endpoint that uses an Image.
* @class Endpoints.Image
* @extends Endpoint
* @constructor
* @param {Object} params Constructor parameters
* @param {Integer} params.src Url of the image to display
* @param {String} [params.cssClass] Optional space-delimited list of CSS classes to attach to the Endpoint.
* @param {String} [params.hoverClass] Optional space-delimited list of CSS classes to attach to the Endpoint when the mouse is hovering over it.
*/


    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>
    
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>

    
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
